/* eslint-disable react/prefer-stateless-function */
import React from 'react';
import Head from 'next/head';
import Button from '@material-ui/core/Button';
import PropTypes from 'prop-types';

import withAuth from '../lib/withAuth';
import withLayout from '../lib/withLayout';

// const Index = ({ user }) =>
class Index extends React.Component {
  static propTypes = {
    user: PropTypes.shape({
      email: PropTypes.string.isRequired,
    }),
  };

  static defaultProps = {
    user: null,
  };

  render() {
    const { user } = this.props;
    return (
      <div style={{ padding: '10px 45px' }}>
        <Head>
          <title>SCCBA DashBoard</title>
          <meta name="description" content="This is the description of the Index page" />
          <style>
            {`@font-face {
                font-family: "NotoSansSC";
                src: ur("../static/fonts/NotoSansSC-Regular.ttf") fromat('ttf');
                src: ur("../static/fonts/NotoSansSC-Regular.eot") fromat('eot');
                src: url("../static/fonts/NotoSansSC-Regular.woff") format("woff");
                font-weight:normal;
                font-style:normal;
               }
               @font-face {
                font-family: "Muli";
                src: url("../static/fonts/Muli-Regular.ttf") format('ttf');
                src: url("../static/fonts/Muli-Regular.eot") format('eot');
                src: url("../static/fonts/Muli-Regular.woff") format('woff');
                font-weight:normal;
                font-style:normal;
               }
               `}
          </style>
        </Head>
        <div style={{ fontFamily: ' Muli, NotoSansSC' }}>
          <p style={{ fontWeight: 400, font: '18px NotoSansSC' }}>生活充实 @ 说话</p>
          <p style={{ fontWeight: '300', font: '14px Muli' }}>
            我的生活工作非常充实，每天都过都非常都充实，所以我可以天天快乐
          </p>
          <p style={{ font: '14px Muli', fontWeight: 400 }}>My daily life is full of loving.</p>
          <p style={{ font: '14px Muli', fontWeight: 300 }}>
            Email:
            {user.email}
          </p>
          <Button variant="contained" style={{ font: 'NotoSansSC' }}>
            我的button
          </Button>
        </div>
      </div>
    );
  }
}

// Index.getInitialProps = async ({ query }) => ({ user: query.user });

export default withAuth(withLayout(Index));
